<template>
<div class="container">
    <button class="btn" @click="changeBtn">切换{{isChangeText ? '二维' : '三维' }}</button>
    <div id="map" class="map" v-if="!isChangeText">
      <SwitchLayers />
    </div>
    <cesium v-if="isChangeText" ref="cesiumVue"/>
</div>
</template>
 
<script>
import * as mapUtils from '../components/mapUtils'
import SwitchLayers from './SwitchLayers.vue';
import cesium from './cesium.vue';
 
export default {
  name: 'MapComponent',
  components:{SwitchLayers,cesium},
  mounted() {
    this.$nextTick(()=>{
      this.initMap();
    })
  },
  data(){
    return{
      map:null,
      isChangeText:false
    }
  },
  methods: {
    // 二维
    initMap(){
      mapUtils.initMap('map')
      // 添加标记
      // mapUtils.addMaker('point')
      // 添加线
      // mapUtils.addLine('line')
      // 添加实时轨迹
      // mapUtils.addTrajectory('Trajectory')

       // 添加类似知识图谱
      // mapUtils.addKnowledgeGraphLinePoint("knowledgeGraphLinePoint")

      // 添加点位类似波纹效果闪动的marker
      // mapUtils.addRippleFlashingPoint("rippleFlashingPoint")

      // 添加点位 最后一个点闪动
      // mapUtils.addLastPointFlashing("lastPointFlashing")

      // 使用圆点标记实现实时轨迹，并且在每个点上添加文字
      // mapUtils.addRealTimeTrackText("realTimeTrackText")
      this.map = mapUtils.getMap()
      
    },
    changeBtn(){
      this.isChangeText = !this.isChangeText
      if(this.isChangeText){
        this.$nextTick(()=>{
          this.clears()
        })
        
      }else {
        this.$nextTick(()=>{
          this.initMap();
        })
      }
    },
    clears(){
      mapUtils.clearIntervalEvents()
    }
  },
  beforeUnmount() {
    this.clears()
  },
}
</script>
 
<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  position: relative;
  .map {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .cesiumContainer{
    width: 100%;
    height: 100%;
  }
  .btn{
    position: absolute;
    z-index: 1;
  }
}
</style>